<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
</head>
<body>
<form id="myform" method="post" enctype="multipart/form-data">
    <table style="border: thin solid">
        <tr >
            <td style="width: 200px;height: 200px" >
                <img id="myimg" src="" >
            </td>
            <td>
                <input type="file" name="files"  multiple="multiple" >
            </td>
        </tr>
        <tr >
            <td colspan="2" style="width: 200px;height: 50px; text-align:center ; border: thin solid">
                <input type="button"  value="提交" onclick="uploadAction()"/>
            </td>
        </tr>
    </table>
</form>
</body>


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    function uploadAction()
    {
        $.ajax({
            url:"fileUpload",
            type: "POST",
            cache : false,
            processData: false,
            contentType: false,
            dataType:"json",
            data: new FormData($('#myform')[0]),
            success: function(data){
                if(data.flag==true){
                    $("#myimg").attr("style","width: 200px;height: 200px");
                    $("#myimg").attr("src",data.message);
                }else{
                    $("#myimg").removeAttr("src")
                    $("#myimg").attr("alt",data.message);
                }
            },
        });
    }

</script>
</html>


